// 创建与服务器的 WebSocket 连接
const socket = new WebSocket('ws://localhost:8765');

// 连接成功时的处理逻辑
socket.onopen = () => {
    console.log('已连接到服务器');
};

socket.onclose = () => {
    console.log('与服务器的连接已关闭');
};

socket.onerror = (error) => {
    console.error('WebSocket 错误:', error);
};

let timeLeft;  // 剩余时间
let isRunning = false;  // 计时器是否正在运行
let countdown;  // 计时器的定时器ID
let currentRoundIndex = 0;  // 当前环节的索引
let isLayout2 = false;  // 是否为 layout2 布局
let leftTimeLeft, rightTimeLeft;  // layout2 中左右计时器的剩余时间
let leftTimerRunning = false;  // 左边计时器是否在运行
let rightTimerRunning = false;  // 右边计时器是否在运行
let isAdmin = false;

// 定义环节数据
let rounds = [
    { name: "正方一辩发言", time: 210 },  // 3 分30秒
    { name: "反方四辩质询正方一辩", time: 90 },  // 1分30秒
    { name: "反方一辩发言", time: 210 },  // 3 分30秒
    { name: "正方四辩质询反方一辩", time: 90 },  // 1分30秒
    { name: "正方二辩发言", time: 120 },  // 2分
    { name: "反方二辩发言", time: 120 },  // 2分
    { name: "正方二辩对辩反方二辩", time: 90, isLayout2: true },  // 各1分30秒，layout2布局
    { name: "正方三辩盘问", time: 120 },  // 2分
    { name: "反方三辩盘问", time: 120 },  // 2分
    { name: "正方三辩发言", time: 90 },  // 2分30秒
    { name: "反方三辩发言", time: 90 },  // 2分30秒
    { name: "自由辩论", time: 240, isLayout2: true },  // 双方各4分钟，layout2布局
    { name: "反方四辩总结陈词", time: 210 },  // 3 分钟
    { name: "正方四辩总结陈词", time: 210 }  // 3 分钟
];

// 初始化音频对象
const alarmSound = new Audio('E:/workspace/learn_web/xjsq/alarm.mp3');

// 更新计时器显示
function updateTimerDisplay() {
    if (isLayout2) {
        const leftTimer = document.getElementById('timer1');
        const rightTimer = document.getElementById('timer2');
        if (leftTimer) leftTimer.textContent = formatTime(leftTimeLeft);
        if (rightTimer) rightTimer.textContent = formatTime(rightTimeLeft);
    } else {
        const timer = document.getElementById('timer1');
        if (timer) timer.textContent = formatTime(timeLeft);
    }
}

// 格式化时间显示
function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}

// 开始倒计时
function startCountdown() {
    if (isRunning) return;
    isRunning = true;
    countdown = setInterval(function() {
        
        if (isLayout2) {
            if (leftTimerRunning && leftTimeLeft > 0) leftTimeLeft--;
            if (rightTimerRunning && rightTimeLeft > 0) rightTimeLeft--;
        } else {
            timeLeft--;
        }
        updateTimerDisplay();

        // 判断是否到达30秒并启动呼吸动画
        if (isLayout2) {
            // 左边计时器
            const leftTimerElement = document.getElementById('timer1');
            if (leftTimerElement && leftTimeLeft <= 30 && leftTimeLeft > 0 && !leftTimerElement.classList.contains('breathing')) {
                leftTimerElement.classList.add('breathing'); // 启动呼吸动画
            }

            // 右边计时器
            const rightTimerElement = document.getElementById('timer2');
            if (rightTimerElement && rightTimeLeft <= 30 && rightTimeLeft > 0 && !rightTimerElement.classList.contains('breathing')) {
                rightTimerElement.classList.add('breathing'); // 启动呼吸动画
            }
        } else {
            // 只有一个计时器，触发动画
            const timerElement = document.getElementById('timer1');
            if (timerElement && timeLeft <= 30 && timeLeft > 0 && !timerElement.classList.contains('breathing')) {
                timerElement.classList.add('breathing'); // 启动呼吸动画
            }
        }

        // 当计时器结束时播放音频并切换到下一个环节
        if ((isLayout2 && leftTimeLeft <= 0 && rightTimeLeft <= 0) || (!isLayout2 && timeLeft <= 0)) {
            clearInterval(countdown);
            isRunning = false;
            playAlarmSound();  // 播放音频

            // 延迟切换到下一个环节，确保音频播放完成
            setTimeout(function() {
                nextRound();
            }, 5000);  // 延迟 5 秒切换环节
        }
    }, 1000);
}

// 播放音频
function playAlarmSound() {
    alarmSound.currentTime = 0;  // 重置音频到开始位置
    alarmSound.play();  // 播放音频
    setTimeout(function() {
        alarmSound.pause();  // 停止音频播放（5秒后停止）
    }, 5000);  // 音频播放 5 秒钟
}

// 暂停倒计时
function pauseCountdown() {
    clearInterval(countdown);
    isRunning = false;
}

// 重置倒计时
function resetCountdown() {
    clearInterval(countdown);
    isRunning = false;
    if (isLayout2) {
        leftTimeLeft = rightTimeLeft = rounds[currentRoundIndex].time;
    } else {
        timeLeft = rounds[currentRoundIndex].time;
    }
    updateTimerDisplay();
}

// 更新布局为 layout2
function updateLayout2() {
    isLayout2 = true;
    const roundTime = formatTime(rounds[currentRoundIndex].time);
    const timerContainer = document.querySelector('.container2');
    timerContainer.innerHTML = `
        <div class="timer" id="timer1">${roundTime}</div>
        <div class="timer" id="timer2">${roundTime}</div>
        <button id="startLeftBtn">启动正方</button>
        <button id="startRightBtn">启动反方</button>
    `;
    
    // 重新绑定事件
    bindEvents();
    leftTimeLeft = rightTimeLeft = rounds[currentRoundIndex].time;
    updateTimerDisplay();
}

// 更新布局为 layout1
function updateLayout1() {
    isLayout2 = false;
    const roundTime = formatTime(rounds[currentRoundIndex].time);
    const timerContainer = document.querySelector('.container2');
    timerContainer.innerHTML = `<div class="timer" id="timer1">${roundTime}</div>`;
    timeLeft = rounds[currentRoundIndex].time;
    updateTimerDisplay();
}

// 启动正方计时器
function startLeftTimer() {
    if (leftTimerRunning) return;
    rightTimerRunning = false;
    pauseCountdown(); // 先暂停另一边的计时器
    leftTimerRunning = true;
    startCountdown();
}

// 启动反方计时器
function startRightTimer() {
    if (rightTimerRunning) return;
    leftTimerRunning = false;
    pauseCountdown(); // 先暂停另一边的计时器
    rightTimerRunning = true;
    startCountdown();
}

// 切换到下一个环节
function nextRound() {
    currentRoundIndex = (currentRoundIndex + 1) % rounds.length;
    updateLayout();
}

// 切换到上一个环节
function prevRound() {
    currentRoundIndex = (currentRoundIndex - 1 + rounds.length) % rounds.length;
    updateLayout();
}

// 更新布局和环节
function updateLayout() {
    let round = rounds[currentRoundIndex];
    document.getElementById('currentRound').textContent = `当前环节：${round.name}`;
    timeLeft = leftTimeLeft = rightTimeLeft = round.time;

    if (round.name === "正方二辩对辩反方二辩" || round.name === "自由辩论") {
        document.body.classList.add('layout2');
        updateLayout2();
    } else {
        document.body.classList.remove('layout2');
        updateLayout1();
    }
}

// 绑定事件函数
function bindEvents() {
    // 基本功能按钮 - 始终可用
    document.getElementById('startBtn').addEventListener('click', () => {
        const message = JSON.stringify({ event: 'start_countdown' });
        socket.send(message);
    });

    document.getElementById('startLeftBtn').addEventListener('click', () => {
        const message = JSON.stringify({ event: 'startLeft' });
        socket.send(message);
    });

    document.getElementById('startRightBtn').addEventListener('click', () => {
        const message = JSON.stringify({ event: 'startRight' });
        socket.send(message);
    });

    // 管理员功能按钮 - 仅在登录后可用
    if (isAdmin) {
        document.getElementById('pauseBtn').addEventListener('click', () => {
            const message = JSON.stringify({ event: 'pause' });
            socket.send(message);
        });

        document.getElementById('resetBtn').addEventListener('click', () => {
            const message = JSON.stringify({ event: 'reset' });
            socket.send(message);
        });

        document.getElementById('prevStageBtn').addEventListener('click', () => {
            const message = JSON.stringify({ event: 'prevStage' });
            socket.send(message);
        });

        document.getElementById('nextStageBtn').addEventListener('click', () => {
            const message = JSON.stringify({ event: 'nextStage' });
            socket.send(message);
        });
    }
}

// 修改键盘事件处理函数
function handleKeydown(event) {
    switch (event.key) {
        case ' ': // 空格键
            const message = JSON.stringify({ event: isRunning ? 'pause' : 'start_countdown' });
            socket.send(message);
            break;
        case 'r': // 'r' 键
            if (isAdmin) { // 只有管理员可以重置
                socket.send(JSON.stringify({ event: 'reset' }));
            }
            break;
        case 'ArrowLeft': // 左箭头键
            if (isAdmin) { // 只有管理员可以切换环节
                socket.send(JSON.stringify({ event: 'prevStage' }));
            }
            break;
        case 'ArrowRight': // 右箭头键
            if (isAdmin) { // 只有管理员可以切换环节
                socket.send(JSON.stringify({ event: 'nextStage' }));
            }
            break;
        case 'k': // 'k' 键
            socket.send(JSON.stringify({ event: 'startLeft' }));
            break;
        case 'l': // 'l' 键
            socket.send(JSON.stringify({ event: 'startRight' }));
            break;
        default:
            break;
    }
}

// 添加登录处理函数
function setupLoginHandlers() {
    const loginBtn = document.getElementById('loginBtn');
    const loginModal = document.getElementById('loginModal');
    const closeBtn = document.querySelector('.close');
    const loginForm = document.getElementById('loginForm');
    const loginError = document.getElementById('loginError');

    // 添加鼠标跟踪效果
    loginBtn.addEventListener('mousemove', (e) => {
        const rect = e.target.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        loginBtn.style.setProperty('--mouse-x', `${x}px`);
        loginBtn.style.setProperty('--mouse-y', `${y}px`);
    });

    // 打开登录模态框
    loginBtn.onclick = () => {
        loginModal.style.display = "block";
        // 使用 setTimeout 确保过渡动画正常工作
        setTimeout(() => {
            loginModal.classList.add('show');
        }, 10);
    }

    // 关闭模态框
    function closeModal() {
        loginModal.classList.remove('show');
        setTimeout(() => {
            loginModal.style.display = "none";
        }, 300); // 等待过渡动画完成
    }

    closeBtn.onclick = closeModal;

    // 点击模态框外部关闭
    window.onclick = (event) => {
        if (event.target == loginModal) {
            closeModal();
        }
    }

    // 处理登录表单提交
    loginForm.onsubmit = (e) => {
        e.preventDefault();
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        if (username === 'admin' && password === 'admin') {
            isAdmin = true;
            closeModal();
            loginBtn.style.display = "none";
            showAdminControls();
            loginError.textContent = '';
        } else {
            loginError.textContent = '用户名或密码错误';
        }
    }
}

// 显示管理员控制按钮
function showAdminControls() {
    const adminButtons = document.querySelectorAll('.admin-only');
    adminButtons.forEach((button, index) => {
        setTimeout(() => {
            button.classList.remove('hidden');
            button.classList.add('show');
        }, index * 100);
    });
    // 重新绑定事件，包含管理员功能
    bindEvents();
}

// 初始化
function init() {
    updateLayout();
    bindEvents(); // 初始只绑定基本功能
    setupLoginHandlers();
    document.addEventListener('keydown', handleKeydown);
}

// 确保在文档加载完成后初始化
document.addEventListener('DOMContentLoaded', init);

particlesJS("particles-js", {
    particles: {
        number: {
            value: 100, // 粒子数量
            density: {
                enable: true,
                value_area: 800
            }
        },
        color: {
            value: "#ffffff" // 粒子颜色
        },
        shape: {
            type: "circle", // 粒子的形状
            stroke: {
                width: 0,
                color: "#000000"
            }
        },
        opacity: {
            value: 0.5, // 粒子的透明度
            random: true,
            anim: {
                enable: true,
                speed: 1,
                opacity_min: 0.1
            }
        },
        size: {
            value: 3, // 粒子的大小
            random: true,
            anim: {
                enable: true,
                speed: 4,
                size_min: 0.1
            }
        },
        move: {
            enable: true,
            speed: 2, // 粒子移动速度
            direction: "random",
            random: true,
            straight: false,
            out_mode: "out"
        }
    },
    interactivity: {
        detect_on: "canvas",
        events: {
            onhover: {
                enable: true,
                mode: "repulse" // 鼠标悬停时粒子的交互效果
            },
            onclick: {
                enable: true,
                mode: "push" // 鼠标点击时粒子的交互效果
            }
        }
    },
    retina_detect: true
});

// 修改 WebSocket 消息处理函数
socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    switch (data.event) {
        case 'start_countdown':
            startCountdown();
            break;
        case 'pause':
            // 即使未登录也执行暂停功能，但不显示按钮
            pauseCountdown();
            break;
        case 'reset':
            // 即使未登录也执行重置功能，但不显示按钮
            resetCountdown();
            break;
        case 'prevStage':
            // 即使未登录也执行切换环节功能，但不显示按钮
            prevRound();
            break;
        case 'nextStage':
            // 即使未登录也执行切换环节功能，但不显示按钮
            nextRound();
            break;
        case 'startLeft':
            startLeftTimer();
            break;
        case 'startRight':
            startRightTimer();
            break;
    }
};
